//初始化渲染页
Vue.component("render", {
  template: `<div :style="style">
    <component v-for="(item,id) in data" :key="id" :data="item.data" :layer="item.layer" :id="item.id" :is="item.title">
        <template v-if="item.slot" v-slot:default>
            <render :data="item.slot" :style="item.style"></render>
        </template>
    </component></div>`,
  props: ["data", "style"],
});
//初始化渲染页
Vue.component("renderConfig", {
  template: `<div>
    <component v-for="(item,id) in data" :key="id" :data="item.data" :slot="item.slot" :styleData="item.style" :id="item.id" :is="item.config">
        <template v-if="item.slot" v-slot:default>
            <render-config :data="item.slot"></render-config>
        </template>
    </component></div>`,
  props: ["data"],
});
Vue.component("yl-table", {
  template: `<div>
    <el-form :inline="true" :form="form">
      <el-form-item>
        <el-input v-model="form.ID_Name" placeholder="请输入账号名称" @keyup.enter="onSerach"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSerach">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe border height="calc(100vh - 140px)" style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
      <el-table-column v-for="(item,index) in data.propData" :key="index"
        :prop="item.prop" :label="item.label"></el-table-column>
      <el-table-column align="center" label="操作" width="180">

      </el-table-column>
    </el-table>
    <div style="display: flex;align-items: center;justify-content: space-between;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="form.page" :page-sizes="[10, 20, 30, 50]" :page-size="form.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <el-button @click="handle" type="primary" size="mini" icon="el-icon-setting" plain>配置页面</el-button>
    </div></div>`,
  props: ["data"],
  data() {
    return {
      form: {
        page: 1, //页数
        limit: 10, //每页数据条数
      },
      total: 0,
      tableData: [],
      prop: {},
      value: "",
    };
  },
  mounted() {
    this.getData();
    this.getList(this.form);
  },
  methods: {
    getData() {},
    onSerach() {
      //查询方法
      this.getList(this.form);
    },
    handleSizeChange(val) {
      this.form.page = 1;
      this.form.limit = val;
      this.getList(this.form);
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
    getList() {
      const that = this;
      $.ajax({
        type: "POST",
        url: `${DomainName}${that.data.Type}?token=${$.cookie("token")}`,
        data: {
          Data: that.data.Type == "0" ? "" : that.data.SQLString,
          Type: "0",
        },
        success: function (Result) {
          if (Result.Status == "success") {
            that.tableData = Result.Data;
          }
        },
        complete: function (XMLHttpRequest) {
          if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
            window.parent.document.location.href =
              absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
          }
        },
        dataType: "json",
      });
    },
    Add() {
      window.location.href = "./Add.html";
    },
    handle() {
      sessionStorage.setItem(
        "System_Query_SerialNumber",
        this.data.System_Query_SerialNumber
      );
      window.location.href = absolutepath() + "/component/config.html";
    },
  },
});
Vue.component("yl-table-config", {
  template: `<el-collapse v-model="activeNames">
        <el-collapse-item :name="1">
            <template slot="title">
                <div class="table_titel">
                    <div class="titel">表格配置</div>
                </div>
            </template>
            <div class="table_titel">
                <div class="titel">配置数据源</div>
            </div>
            <el-descriptions :column="1" border size="small">
                <el-descriptions-item label="选择查询方式">
                    <el-radio v-model="data.Type" label="1">表名查询</el-radio>
                    <el-radio v-model="data.Type" label="/getInquirySQLAction">自定义查询</el-radio>
                </el-descriptions-item>
                <template v-if="data.Type==1">
                    <el-descriptions-item label="菜单名称">
                        <el-input v-model.trim="data.TableName" placeholder="请输入表名"></el-input>
                    </el-descriptions-item>
                </template>
                <template v-else>
                    <el-descriptions-item label="请输入SQL">
                        <el-input @blur="handleBlur" type="textarea"
                                :autosize="{ minRows: 6, maxRows:6}" placeholder="请输入SQL" v-model="data.SQLString"></el-input>
                    </el-descriptions-item>
                </template>
            </el-descriptions>
            <div class="table_titel">
                <div class="titel">显示字段</div>
            </div>
            <el-descriptions v-for="(item,index) in data.propData" :key="index" :column="3" border size="small">
                <el-descriptions-item label="字段名称">
                    <el-input disabled v-model.trim="item.prop" placeholder="字段名"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="显示名称">
                    <el-input v-model.trim="item.label" placeholder="请输入显示名称"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="是否展示">
                    <el-switch v-model="item.isShow" active-text="显示" inactive-text="隐藏"></el-switch>
                </el-descriptions-item>
            </el-descriptions>
        </el-collapse-item>
    </el-collapse>`,
  props: ["data"],
  data() {
    return {
      activeNames: "1",
      prop: [],
    };
  },
  mounted() {
    // this.getData();
    // this.getList(this.form);
  },
  methods: {
    handleBlur() {
      //失焦
      const that = this;
      $.ajax({
        type: "POST",
        url: `${DomainName}${this.data.Type}?token=${$.cookie("token")}`,
        data: {
          Data: this.data.SQLString.replace(/\n/g, "\r\n"),
          Type: "1", //0:正常 1:字符串
        },
        success: function (Result) {
          console.log(Result);
          if (Result.Status == "success") {
            that.data.propData = Result.Data;
          }
        },
        complete: function (XMLHttpRequest) {
          if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
            window.parent.document.location.href =
              absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
          }
        },
        dataType: "json",
      });
    },
  },
});
new Vue({
  el: "#app",
  data() {
    return {
      //渲染层
      form: {},
      formData: [
        {
          title: "yl-table",
          config: "yl-table-config",
          data: {
            Type: "/getInquirySQLAction",
            TableName: "",
            SQLString:
              "SELECT approval_info.Approval_Info_SerialNumber As Approval_Info_SerialNumber,\r\n            approval_info.Approval_Info_Name As Approval_Info_Name,\r\n            approval_info.approval_auto_pass As approval_auto_pass\r\n            FROM approval_info",
            propData: [
              {
                prop: "Approval_Info_SerialNumber",
                label: "测试",
                isShow: false,
              },
              { prop: "Approval_Info_Name", label: "哈哈哈", isShow: true },
              { prop: "approval_auto_pass", label: "1231", isShow: true },
            ],
          },
        },
      ],
      data: [
        {
          title: "Swiper",
          config: "SwiperConfig",
          name: "轮播图",
          slot: false,
          data: {
            arrow: "never", //切换箭头展示
            times: 2, //轮播时长 单位:s
            type: "", //类型 空:默认  card:卡片化
            trigger: "click", //指示器触发条件
            radius: 10, //圆角弧度
            left: 10, //左边距
            leftUnit: "px", //左边距单位
            right: 10, //右边距
            rightUnit: "px", //右边距单位
            top: 10, //上边距
            topUnit: "px", //上边距单位
            bottom: 0, //下边距
            bottomUnit: "px", //下边距单位
            direction: "horizontal", //滚动方向 水平:horizontal 垂直:vertical
            height: "150", //高度
            heightUnit: "px", //高度单位
            Children: {
              image: [
                {
                  id: 1,
                  src: "./img/t1.png",
                  fit: "contain",
                },
                {
                  id: 2,
                  src: "./img/t2.png",
                  fit: "contain",
                },
                {
                  id: 3,
                  src: "./img/t3.png",
                  fit: "contain",
                },
                {
                  id: 4,
                  src: "./img/t4.png",
                  fit: "contain",
                },
                {
                  id: 5,
                  src: "./img/t1.png",
                  fit: "contain",
                },
                {
                  id: 6,
                  src: "./img/t2.png",
                  fit: "contain",
                },
                {
                  id: 7,
                  src: "./img/t3.png",
                  fit: "contain",
                },
                {
                  id: 8,
                  src: "./img/t4.png",
                  fit: "contain",
                },
              ],
            },
          },
        },
        {
          title: "Card",
          config: "CardConfig",
          name: "卡片",
          slot: true,
        },
        {
          title: "NavItem",
          config: "NavItemConfig",
          name: "导航",
          slot: false,
          data: [
            {
              img: "./img/t1.png",
              name: "粮油副食",
            },
            {
              img: "./img/t2.png",
              name: "水果蔬菜",
            },
            {
              img: "./img/t3.png",
              name: "休闲食品",
            },
            {
              img: "./img/t4.png",
              name: "肉蛋水产",
            },
          ],
        },
        {
          title: "Tab",
          config: "TabConfig",
          name: "选项卡",
          slot: true,
          data: [
            {
              tab: "测试",
            },
            {
              tab: "测试",
            },
            {
              tab: "测试",
            },
          ],
        },
        {
          title: "Tab",
          config: "TabConfig",
          name: "表格",
          slot: true,
          data: [
            {
              tab: "测试",
            },
            {
              tab: "测试",
            },
            {
              tab: "测试",
            },
          ],
        },
        {
          title: "ShopList",
          name: "商品列表",
          config: "ShopListConfig",
          slot: false,
          data: [
            {
              src: "./img/t1.png",
              name: "测试美食",
              main: "商品简介商品简介商品简介商品简介商品简介",
              amount: "29.90",
            },
            {
              src: "./img/t1.png",
              name: "测试美食",
              main: "商品简介商品简介商品简介商品简介商品简介",
              amount: "29.90",
            },
            {
              src: "./img/t1.png",
              name: "测试美食",
              main: "商品简介商品简介商品简介商品简介商品简介",
              amount: "29.90",
            },
            {
              src: "./img/t1.png",
              name: "测试美食",
              main: "商品简介商品简介商品简介商品简介商品简介",
              amount: "29.90",
            },
            {
              src: "./img/t1.png",
              name: "测试美食",
              main: "商品简介商品简介商品简介商品简介商品简介",
              amount: "29.90",
            },
          ],
        },
        {
          title: "row",
          config: "rowConfig",
          name: "栅格布局",
          data: {
            gutter: 0, //栅格间隔
            type: false, //type布局模式，可选flex
            justify: "start", //flex布局下水平排列方式
            align: "top", //flex布局下垂直排列方式
            tag: "div", //自定义标签元素类型
          },
          slot: [
            {
              title: "rowItem",
              config: "rowItemConfig",
              layer: false,
              name: "栅格",
              data: {
                minHeight: 100, //最小高度
                minHeightUnit: "px", //最小高度单位
                span: 24, //栅格占据的列数
                offset: 0, //栅格左侧的间隔格数
                push: 0, //栅格向右移动格数
                pull: 0, //栅格向左移动格数
                xs: false, //<768px 响应式栅格数或者栅格属性对象
                sm: false, //≥768px 响应式栅格数或者栅格属性对象
                md: false, //≥992px 响应式栅格数或者栅格属性对象
                lg: false, //≥1200px 响应式栅格数或者栅格属性对象
                xl: false, //≥1920px 响应式栅格数或者栅格属性对象
                tag: "div", //自定义元素标签
              },
              slot: [],
            },
          ],
        },
      ],
      Page_SerialNumber: "",
      nowVal: 50,
      loading: false,
    };
  },
  store,
  mixins: [drag],
  computed: {
    SelectElement() {
      return this.$store.state.SelectElement;
    },
    SortableSwitch() {
      return this.$store.state.SortableSwitch;
    },
  },
  watch: {
    SortableSwitch(val) {
      this.isSwitch = val;
    },
  },
  methods: {
    change1(val) {
      console.log(val);
    },
    environment(id) {
      if (id == 1) {
        $("#test").css({
          transform: "none",
          width: "375px",
          height: "100%",
        });
      } else if (id == 2) {
        $("#test").css({
          transform: "scale(0.5) translate(-50%,-50%)",
          width: "1400px",
          height: "200%",
        });
      }
    },
    getData(Primary_Key) {
      const _this = this;
      $.ajax({
        type: "POST",
        url: DomainName + "/getInquiryIDOriginal?grant_type=tourist",
        data: {
          Data: "system_model_page",
          Primary_Key,
          Primary_Key_Name: "Page_SerialNumber",
          isNullEnterprise: true,
        },
        success: function (Result) {
          console.log(Result);
          if (Result.length > 0) {
            _this.form = Result[0];
            if (Result[0].Config_JSON) {
              _this.formData = Result[0].Config_JSON;
            }
          }
        },
        error: function () {
          _this.$message.error("操作失败，请稍后再试");
        },
        dataType: "json",
      });
    },
    handle(item) {
      if (this.SelectElement) {
        let obj = this.findObjectsById(this.SelectElement, this.form)[0];
        obj.slot.push({
          layer: false,
          title: item.title,
          data: item.data,
          config: item.config,
          slot: item.slot ? [] : "",
          id: createUniqueString(),
        });
      } else if (item.title == "row") {
        this.form.push({
          layer: true,
          title: item.title,
          data: item.data,
          config: item.config,
          id: createUniqueString(),
          slot: [
            {
              title: "rowItem",
              config: "rowItemConfig",
              layer: false,
              id: createUniqueString(),
              data: {
                minHeight: 100, //最小高度
                minHeightUnit: "px", //最小高度单位
                span: 24, //栅格占据的列数
                offset: 0, //栅格左侧的间隔格数
                push: 0, //栅格向右移动格数
                pull: 0, //栅格向左移动格数
                xs: false, //<768px 响应式栅格数或者栅格属性对象
                sm: false, //≥768px 响应式栅格数或者栅格属性对象
                md: false, //≥992px 响应式栅格数或者栅格属性对象
                lg: false, //≥1200px 响应式栅格数或者栅格属性对象
                xl: false, //≥1920px 响应式栅格数或者栅格属性对象
                tag: "div", //自定义元素标签
              },
              slot: [],
            },
          ],
        });
      } else {
        this.form.push({
          layer: true,
          title: item.title,
          data: item.data,
          config: item.config,
          slot: item.slot ? [] : "",
          id: createUniqueString(),
        });
      }
    },
    findObjectsById(id, arr, result = []) {
      for (let obj of arr) {
        if (obj.id === id) {
          result.push(obj);
        }
        if (Array.isArray(obj.slot) && obj.slot.length > 0) {
          this.findObjectsById(id, obj.slot, result);
        }
      }
      return result;
    },
    handle1() {
      this.$store.commit("setSelectElement", "");
      console.log(this.SelectElement);
    },
    hadnlelayer() {
      this.$store.commit("setSortableSwitch");
    },
    sumbit() {
      const _this = this;
      _this.loading = true;
      $.ajax({
        type: "POST",
        url: DomainName + "/TableIDEdit?token=" + $.cookie("token"),
        data: {
          TableName: "system_model_page",
          Primary_Key: JSON.stringify({
            Page_SerialNumber: this.Page_SerialNumber,
          }),
          Modify: JSON.stringify({
            Page_JSON: JSON.stringify(this.form),
          }),
          Operation_Name: "修改页面样式",
        },
        success: function (res) {
          if (res.Status == "success") {
            _this.$message.success("操作成功!");
            window.history.go(-1);
          } else {
            _this.$message.error("操作失败，请稍后再试");
          }
        },
        error: function () {
          _this.$message.error("操作失败，请稍后再试");
        },
        complete: function (XMLHttpRequest) {
          _this.loading = false;
          if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
            window.parent.document.location.href =
              absolutepath() + XMLHttpRequest.getResponseHeader("CONTENTPATH");
          }
        },
        dataType: "json",
      });
    },
  },
  mounted() {
    const Page_SerialNumber = sessionStorage.getItem("Page_SerialNumber");
    this.getData(Page_SerialNumber);
    if (getQueryObject().is == "config") {
      this.sortable(this, "#test div", ".layer", this.form);
      var video = document.getElementById("video");
    }
  },
});
